<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件生命周期</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message : "了解 Vue 生命周期"
        },
        template: '<h2 id="test">hello</h2>',
        //组件创建之前
        beforeCreate(){
            console.group('beforeCreate 组件创建之前状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        //组件创建完毕
        created(){
            console.group('created 组件创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        // 组件挂载之前
        beforeMount(){
            console.group('beforeMount 组件挂载之前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el));
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        // 组件挂载完毕
        mounted(){
            console.group('mounted 组件挂载完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        // 组件更新之前
        beforeUpdate(){
            console.group('beforeUpdate 组件更新之前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        // 组件更新完毕
        updated(){
            console.group('updated 组件更新完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        // 组件销毁之前
        beforeDestroy(){
            console.group('beforeDestroy 组件销毁之前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        },
        // 组件销毁完毕
        destroyed(){
            console.group('destroyed 组件销毁完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
            console.log("%c%s", "color:red", "node: " + document.getElementById('test'));
        }
    })
</script>
</body>
</html>